<template>
  <div class="com-admin-auth-edit-user">
    <br />
    <span
      :style="$bgImage(userIcon)"
      class="icon w-image-fit w-pointer w-round"
      @click="iconClick"
    >
      <a-icon class="edit" type="edit" />
    </span>
    <w-pop ref="WPop" />
  </div>
</template>

<script lang="ts">
import { Getter } from 'vuex-class'
import { Vue, Component } from 'vue-property-decorator'
import WPop, { PopType } from '@/components/admin/auth/editUser/pop'

@Component({
  name: 'ComAdminAuthEditUser',
  components: {
    WPop
  }
})
export default class ComAdminAuthEditUser extends Vue {
  @Getter('auth/USER_ICON') userIcon!: string

  iconClick () {
    (this.$refs.WPop as PopType).show()
  }
}
</script>

<style scoped lang="less">
.com-admin-auth-edit-user {
  .icon {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    font-size: 24px;
    position: relative;
    .edit {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
